<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>05-防抖节流</title>
</head>

<body>
    <button id="throttle">节流</button>
    <button id="debounce">防抖</button>
    <script>
        function throttle(callback, delay) {
            // 用于保存处理事件的时间, 初始值为0, 保证第一次会执行
            let start = 0
            // 返回事件监听函数 ==> 每次事件发生都会执行
            return function (event) {
                console.log('---throttle')
                // 发生事件的当前时间
                const current = Date.now()
                // 与上一次处理事件的时差大于delay的时间
                if (current - start > delay) {
                    // 执行处理事件的函数
                    callback.call(event.target, event)
                    // 保证当前时间
                    start = current
                }
            }
        }
        const throttleBtn = document.getElementById('throttle')
        throttleBtn.onclick = throttle(() => {
            console.log(11111)
        }, 1000)


        function debounce(callback, delay) {
            // 返回事件监听函数 ==> 每次事件发生都会执行
            return function (event) {
                console.log('---debounce')
                // 如果还有未执行的定时器, 清除它
                if (callback.timeoutId) {
                    clearTimeout(callback.timeoutId)
                }
                // 启动延时delay的定时器, 并保证定时器id
                callback.timeoutId = setTimeout(() => {
                    // 执行处理事件的函数
                    callback.call(event.target, event)
                    // 删除保存的定时器id
                    callback.timeoutId = null
                }, delay);
            }
        }

        const debounceBtn = document.getElementById('debounce')
        debounceBtn.onclick = debounce(() => {
            console.log('abc')
        }, 1000)
        // throttleBtn.onclick = function () { }

        // function fn() {

        // }
        // fn.aaa = '123'
        // console.log(fn.aaa)
    </script>
</body>

</html>